<!-- home -->
<template>
  <div class="home_body">
    <div class="nav">
      <navFronted class="nav-fronted"> </navFronted>
    </div>
    <main class="main">
      <homeSearch class="homeSearch" />
      <workSplace class="workSplace" />
    </main>
    <footer></footer>
  </div>
</template>

<script>
import navFronted from "@/components/navFronted/navFronted";
import homeSearch from "@/components/homeSearch/homeSearch";
import workSplace from "@/components/workSplace/workSplace";
export default {
  name: "home",
  components: { navFronted, homeSearch, workSplace },
  data() {
    return {};
  },
  mounted(){
    //TODO 1把搜索的分类改成需要的，tag去掉 换成其他的， 2Cascader级联选择器
  }
};
</script>

<style lang='scss' scoped>
.nav {
  display: flex;
  width: 100%;
  padding: 0 30px;
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  border-bottom: solid 1px #e6e6e6;
  z-index: 99;
  .nav-fronted {
    width: 100%;
    max-width: 1128px;
    margin: 0 auto;
  }
}
.workSplace {
  width: 100%;
  max-width: 1128px;
  margin: 0 auto;
  display: flex;
  background: white;
  padding: 20px 16px 8px 16px;
  box-shadow: 0 0 0 1px rgb(150 131 131 / 15%), 0 2px 3px rgb(129 121 121 / 20%);
  transition: box-shadow 83ms;
  border-radius: 10px;
}
.home_body {
  background: rgb(243, 242, 239);
  min-height: 100vh;
}
.main{
    padding-top: 60px;
    width: 100%;
    max-width: 1128px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom:6px;
    .homeSearch{
      margin-bottom: 20px;
    }
}
@media screen and (max-width: 1150px) {
  .main {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 6px;
  }
}
</style>